<template>
    <div class="account-manage">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="userForm.id"
            label="用户ID"
            readonly
          />
          <van-field
            v-model="userForm.email"
            label="邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
          />
          <van-field
            v-model="userForm.phone"
            label="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="maskedPassword"
            label="密码"
            type="password"
            readonly
            right-icon="edit"
            @click-right-icon="showPasswordDialog = true"
          />
        </van-cell-group>
  
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            保存修改
          </van-button>
          <van-button 
            round 
            block 
            type="danger" 
            @click="handleLogout" 
            style="margin-top: 16px;"
          >
            退出登录
          </van-button>
        </div>
      </van-form>
  
      <!-- 修改密码弹窗 -->
      <van-dialog
        v-model:show="showPasswordDialog"
        title="修改密码"
        show-cancel-button
        @confirm="handlePasswordChange"
      >
        <van-field
          v-model="newPassword"
          type="password"
          label="新密码"
          placeholder="请输入新密码"
        />
      </van-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useUserStore } from '../../stores/user';
  import { useRouter } from 'vue-router';
  import { updateUserInfoAPI } from '../../api/user/user';
  import { showToast, showDialog } from 'vant';
  const userStore = useUserStore();
  const router = useRouter();
  const showPasswordDialog = ref(false);
  const newPassword = ref('');
  const maskedPassword = ref('********');
  
  const userForm = ref({
    id: userStore.userInfo.id,
    email: userStore.userInfo.email,
    phone: userStore.userInfo.phone,
    password: userStore.userInfo.password
  });
  
  const onSubmit = async () => {
    try {
      const res = await updateUserInfoAPI(userForm.value);
      if (res.success) {
        userStore.updateUserInfo(userForm.value);
        showToast('修改成功');
      } else {
        showToast(res.errMsg || '修改失败');
      }
    } catch (error) {
      showToast('修改失败');
    }
  };
  
  const handlePasswordChange = async () => {
    if (newPassword.value) {
      try {
        const res = await updateUserInfoAPI({ 
          ...userForm.value, 
          password: newPassword.value 
        });
        if (res.success) {
          userStore.updateUserInfo({ password: newPassword.value });
          showToast('密码修改成功');
          newPassword.value = '';
        } else {
          showToast(res.errMsg || '密码修改失败');
        }
      } catch (error) {
        showToast('密码修改失败');
      }
    }
  };
  
  const handleLogout = () => {
    // 显示确认对话框
    showDialog({
      title: '确认退出',
      message: '确定要退出登录吗？',
      showCancelButton: true,
    })
      .then(() => {
        // 用户点击确认
        userStore.clearLoginInfo();
        showToast('已退出登录');
        router.push('/login/account');
      })
      .catch(() => {
        // 用户点击取消，不做任何操作
      });
  };
  
  onMounted(() => {
    if (!userStore.isLogin) {
      router.push('/login/account');
    }
  });
  </script>
  
  <style scoped>
  .account-manage {
    padding: 16px;
  }
  </style>